<template>
  <div id="Lndividual">
    <el-container>
		<el-header style="height: 230px;">
				<div class="container" style="height:210px; width: 1524px;">
					<div class="header-wrap" style="height: 100px; width: 1524px;">
						<div class="logo-left">
							<a href="#">
								<img style="height: 80px;" src="@/assets/imgs/theme/logo.png" alt="logo" />
							</a>
						</div>
						<div class="header-right">
							<div class="header-right-input">
								<template>
									<el-select @change="sortProduct(selectvalue)" v-model="selectvalue" filterable
										placeholder="请选择">
										<el-option v-for="item in options" :key="item.id" :label="item.productTypeName"
											:value="item.id">
										</el-option>
									</el-select>
								</template>
								<el-input style="width: 500px;" v-model="input" placeholder="请输入内容"></el-input>
								<el-button type="primary" id="w" @click="selectProduct">查询</el-button>
							</div>
							<div class="header-right-icon">
								<el-badge :value="12" class="item" type="success">
									<a href="#"><i class="el-icon-star-off"></i></a>
								</el-badge>
								<label>收藏</label>
								<!-- @click="gerenzhongxin" -->
								<router-link to="/homepage"><i
										class="el-icon-user"></i></router-link><label>主页</label>
										<router-link to="/Shopping"><i
										class="el-icon-shopping-cart-2"></i></router-link><label>购物车</label>

							</div>
						</div>
					</div>
					<div class="header-wrap-2">
						<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
							@select="handleSelect">
							<el-menu-item index="1">处理中心</el-menu-item>
							<el-submenu index="2">
								<template slot="title">商品类型1</template>
								<el-menu-item index="2-1">商品类型1</el-menu-item>
								<el-menu-item index="2-2">商品类型2</el-menu-item>
								<el-menu-item index="2-3">商品类型3</el-menu-item>
								<el-submenu index="2-4">
									<template slot="title">商品类型4</template>
									<el-menu-item index="2-4-1">选项1</el-menu-item>
									<el-menu-item index="2-4-2">选项2</el-menu-item>
									<el-menu-item index="2-4-3">选项3</el-menu-item>
								</el-submenu>
							</el-submenu>
							<el-menu-item index="3" disabled>导航1</el-menu-item>
							<el-menu-item index="4">导航2</el-menu-item>
							<el-menu-item index="5">导航3</el-menu-item>
							<el-menu-item index="6">导航4</el-menu-item>
							<el-menu-item index="7">导航5</el-menu-item>
							<el-submenu index="8">
								<template slot="title">导航6</template>
								<el-menu-item index="2-1">商品类型1</el-menu-item>
								<el-menu-item index="2-2">商品类型2</el-menu-item>
								<el-menu-item index="2-3">商品类型3</el-menu-item>
							</el-submenu>
							<el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
						</el-menu>
						<div class="header-wrap-2-right hotline">
							<img style="width: 45px; margin-right: 8px;" src="@/assets/imgs/theme/daohang.png" alt="" />
							<p class="header-wrap-2-right-p">1900 - 888</p>
							<span class="header-wrap-2-right-span">24/7 Support Center</span>
						</div>
					</div>

				</div>


			</el-header>
	</el-container>
	
	<el-row class="tac">
    <el-col :span="12">
      <h5>个人中心</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
	  <el-menu-item index="/EditProfileForm" @click="goTo('/EditProfileForm')">
          <i class="el-icon-s-custom"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
		<el-menu-item index="/Overview" @click="goTo('/Overview')">
          <i class="el-icon-message-solid"></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
		<el-menu-item index="/Merchants" @click="goTo('/Merchants')">
          <i class="el-icon-s-custom"></i>
          <span slot="title">商户入驻</span>
        </el-menu-item>
		<el-menu-item index="/Supplier" @click="goTo('/Supplier')">
          <i class="el-icon-s-flag"></i>
          <span slot="title">供应商招募</span>
        </el-menu-item>
		<el-menu-item index="/Address" @click="goTo('/Address')">
          <i class="el-icon-map-location"></i>
          <span slot="title">提货地址选择</span>
        </el-menu-item>
		<el-menu-item index="/Kuang" @click="goTo('/Kuang')">
          <i class="el-icon-user-solid"></i>
          <span slot="title">商户管理</span>
        </el-menu-item>
		<el-menu-item index="/BianKuang" @click="goTo('/BianKuang')">
          <i class="el-icon-s-cooperation"></i>
          <span slot="title">供应商管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <router-view></router-view>
  </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      item: [
        { id: 1, gg: "广告一", img: require("@/assets/imgs/main/num1.png") },
        { id: 2, gg: "广告一", img: require("@/assets/imgs/main/num2.png") },
      ],
      value: [],
      options: [],
      activeIndex: "2",
    };
  },
  created() {
    this.option();
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //主页下拉搜索框
    async option() {
      const { data: res } = await this.$http.post(
        "/buy/productType/getProType"
      );
      // for(let i =0;i<res.size;i++){
      this.options = res;
      // }

      console.log(res);
    },
    handleChange(value) {
      console.log(value);
    },
	handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goTo(path) {
      this.$router.replace(path);
    },
  },
};
</script>

<style scoped>
.el-col-12{
  width: 15%;
}

.time {
	    font-size: 13px;
	    color: #999;
	  }
	  
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
	
	
	.card-1{
		margin-bottom: 200px;
	}
	.section-title2 {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: 44px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title2 .title2 {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title2 h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
	}
	.section-title2 a.show-all2 {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	
	
	
	
	.type-a{
		background-color: #f4f6fA;
		margin: 0px 50px;
		border: 1px solid black;
	}
	.type-a:hover{
		border: 1px solid #3BB77E;
		background-color: white;
		
	}
	.zz{
		color: #253D4E;
	}
	.zz:hover{
		 color: #3BB77E;
	}
	
	.show-all:hover{
		
		color: #3BB77E;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: -130px;
	    }
	  }
	  
	 
	 
	.section-title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: 44px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title .title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
	}
	.section-title a.show-all {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	 .el-carousel__item h3 {
	    color: #ffffff;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #ffffff;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #ffffff;
	  }
	
	p:last-child {
	    margin-bottom: 0;
	}
	.header-wrap-2-right{
		    margin-left: 526px;
	}
	 .hotline p {
	    color: #3BB77E!important;
	}
	.header-wrap-2-right-span {
	    font-weight: 500;
	    font-size: 12px;
	    font-family: "Lato",sans-serif;
	    color: #7E7E7E;
	    display: block;
	    letter-spacing: .9px;
		margin-top: 25px;
		margin-right: 20px;
	}
	
	p {
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 24px;
	    margin-bottom: 5px;
	    color: #7E7E7E;
		    margin: 0;
		    padding: 0;
		    border: 0;
		    font-size: 100%;
		    font: inherit;
		    vertical-align: baseline;
			    margin-top: 0;
			    margin-bottom: 1rem;
				    margin-right: -155px;
	}
.hotline p {
    color: #3BB77E;
    font-size: 26px;
    font-weight: 700;
    font-family: "Quicksand",sans-serif;
    display: block;
    line-height: 1;
}
	.header-wrap-2{
		height: 74px;
		width: 1564px;
		border-top: 1px solid  darkgray;
		border-bottom: 1px solid  darkgray;
		margin-top: 110px;
	margin-left: -1543px;
	}
	.header-right{
		margin-left: -70px;
	}
	.header-right-icon{
		margin-left: 100px;
		label{
			color: darkgray;
		}
		i{
			font-size: 30px;
		}
		a{
			margin-left: 3px;
			padding: 3px;
		}
	}
	a{
		text-decoration: none;
		color: #333;
	}
	.header-right-input{
		background-color: #ffffff;
		margin-left: 160px;
	}
	.header-wrap{
		margin-top: -80px;
	}
	#Homepage{
		height: 100%;
	}
	 .el-header, .el-footer {
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		/* 
		在flex 布局的容器中，
		可以设置justify-content: space-between;实现两对齐
		*/
		display: flex;
		justify-content: space-between;
		/* 当容器是flext，可以设置 align-items: center */
		align-items: center;
		div {
		  display: flex;
		  align-items: center;
		}
		span {
		  margin-left: 20px;
		}
	  }
	  .el-main {
	    background-color: white;
	    color: white;
	    text-align: center;
	    line-height: 160px;
	  }
	    body > .el-container {
	      margin-bottom: 40px;
	    }
		.form-container {  
        padding: 20px;  
        background-color: #f2f2f2;  
        border-radius: 5px;  
    }  
  
    .form-group {  
        margin-bottom: 15px;  
    }  
  
    .form-group label {  
        display: block;  
        margin-bottom: 5px;  
    }  
  
    .form-group input[type="text"],  
    .form-group input[type="email"],  
    .form-group textarea {  
        width: 100%;  
        padding: 10px;  
        border: 1px solid #ccc;  
        border-radius: 5px;  
        box-sizing: border-box;  
    }  
  
    .form-group textarea {  
        height: 100px;  
    }  
  
    .submit-btn {  
        display: block;  
        width: 100%;  
        background-color: #4CAF50;  
        color: #fff;  
        padding: 10px;  
        border: none;  
        border-radius: 5px;  
        cursor: pointer;  
    }  
  
    .submit-btn:hover {  
        background-color: #45a049;  
    }  
.el-menu-item {
	/* color: #fff; */
    /* background-color: #3BB77E; */
    border-radius: 10px;
	margin-top: 10px; /* 顶部间距 */  
}
.el-menu-vertical-demo .el-menu-item.is-active{
	background-color: #3BB77E !important; /* 覆盖默认颜色 */  
  color: #fff; /* 如果需要的话，也可以改变文本颜色 */
}
.el-menu-vertical-demo .el-menu-item:hover {  
  background-color: #3BB77E !important; /* 覆盖默认颜色 */  
  color: #fff; /* 如果需要的话，也可以改变文本颜色 */  
}  

</style>